<template>
	<view class="room-detail-container">
		<!-- 添加扫码组件 -->
		<view v-if="showScanner" class="scanner-container">
			<view class="scanner-header">
				<text class="scanner-title">扫描二维码</text>
				<text class="scanner-close" @click="closeScanner">×</text>
			</view>
			<view class="scanner-content">
				<barcode 
					class="barcode" 
					:autostart="true" 
					:background="false"
					:scanType="['qrCode']"
					@marked="onMarked"
					@error="onError"
				></barcode>
			</view>
			<view class="scanner-tip">请将二维码放入框内，即可自动扫描</view>
		</view>
		<view v-if="loading" class="loading-container">
			<view class="loading-content">
				<view class="loading-icon">
					<view class="loading-dot"></view>
					<view class="loading-dot"></view>
					<view class="loading-dot"></view>
				</view>
				<view class="loading-text-container">
					<view class="loading-text">数据加载中</view>
					<view class="loading-dots">
						<text>.</text>
						<text>.</text>
						<text>.</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="detail-card">
			<view class="card-header">
				<view class="card-title">房间详情 - {{ room.cc }}</view>
				<button v-if="hasRole('admin') || hasAnyRole(['dj', 'duchayuan', 'fuwuyuan', 'duchayuanyuan'])" 
					class="edit-mode-btn" 
					:class="{ 'active': isEditMode }"
					@click="toggleEditMode">
					{{ isEditMode ? '完成' : '编辑' }}
				</button>
			</view>
			
			<!-- 这里增加开始时间选择并展示 -->
			<view class="detail-item">
				<view class="detail-row">
					<view class="detail-col">
						<text class="label">开始时间:</text>
						<view class="value-edit">
							<text v-if="!isEditMode">{{ formatStartTime(room.createdAt) }}</text>
							<picker v-else 
								mode="date" 
								:value="editForm.createdAt"
								:start="'2020-01-01'"
								:end="'2030-12-31'"
								@change="onStartDateChange"
								class="edit-picker">
								<view class="picker-value">
									{{ editForm.createdAt || '请选择开始日期' }}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			
			<!-- Detail Items - Controlled by Role -->
			<view  class="detail-item">
				<view class="detail-row">
					<view class="detail-col" :class="{'booker-edit-mode': isEditMode}">
						<text class="label">订房人:</text>
						<template v-if="!isEditMode">
							<text class="detail-value">{{ room.bookerName || room.bookerId }}</text>
						</template>
						<template v-else>
							<view class="editable-booker-controls">
								<view class="booker-search-wrapper">
									<input v-model="searchName" placeholder="输入用户名搜索" @input="onSearchUser" class="search-input" />
									<input v-model="searchUserId" placeholder="输入工号搜索" @input="onSearchUserById" class="search-input" />
								</view>
								<view class="booker-picker-wrapper">
									<picker
										mode="selector"
										:range="userList"
										range-key="userName"
										@change="onBookerChange"
									>
										<view class="value">{{ selectedBooker.userName || '请选择订房人' }}</view>
									</picker>
								</view>
							</view>
						</template>
					</view>
					<view class="detail-col">
					<!-- 	<text class="label">进房次数:</text>
						<view class="value-edit">
							<text v-if="!isEditMode">{{ room.bookerEntryCount }}</text>
							<input v-else type="number" v-model="editForm.bookerEntryCount" class="edit-input" />
						</view> -->
					</view>
				</view>
			</view>
			
			<view  class="detail-item">
				<view class="detail-row">
					<view class="detail-col">
						<text class="label">服务员:</text>
						<view class="value-edit">
							<text v-if="!isEditMode">{{ room.serviceStaffName || room.serviceStaffId }}</text>
							<picker v-else 
								:range="serviceStaff" 
								range-key="userName"
								:value="serviceStaff.findIndex(item => item.userId === editForm.serviceStaffId)"
								@change="onServiceStaffChange"
								class="edit-picker">
								<view class="picker-value">
									{{ getServiceStaffName() }}
								</view>
							</picker>
						</view>
					</view>
					<view class="detail-col">
						<text class="label">轮房人:</text>
						<view class="value-edit">
							<text v-if="!isEditMode">{{ room.ee || room.managerStaffName || getManagerStaffName(room.ff) || room.ff }}</text>
							<picker v-else 
								:range="managerStaff" 
								range-key="ee"
								:value="managerStaff.findIndex(item => item.ff === editForm.ff)"
								@change="(e) => {
									const selectedStaff = managerStaff[e.detail.value];
									editForm.ff = selectedStaff.ff;
									editForm.ee = selectedStaff.ee;
								}"
								class="edit-picker">
								<view class="picker-value">
									{{ getManagerStaffName() || '请选择业务经理' }}
								</view>
							</picker>
						</view>
					</view>

					
					


					
				</view>
			</view>
			
			<view  class="detail-item">
				<text class="label">DJ:</text>
				<view class="value-edit">
					<text v-if="!isEditMode">{{ room.djName || room.djId }}</text>
					<picker v-else 
						:range="djList" 
						range-key="userName"
						:value="djList.findIndex(item => item.userId === editForm.djId)"
						@change="onDjChange"
						class="edit-picker">
						<view class="picker-value">
							{{ getDjName() }}
						</view>
					</picker>
				</view>
			</view>

			<!-- 新增静态信息 -->
		<!-- 	<view v-if="hasRole('admin') || hasAnyRole(['guanliceng', 'yewuyuan', 'yewujinli'])" class="detail-item">
				<text class="label">优秀业务员:</text>
				<text class="value">暂无</text>
			</view> -->

			<!--  暂时注释掉	
			<view v-if="hasRole('admin') || hasAnyRole(['guanliceng', 'yewuyuan', 'yewujinli'])" class="detail-item">
				<text class="label">投诉情况:</text>
				<text class="value">暂无投诉</text>
			</view>

		-->

			<view v-if="hasRole('admin') || hasAnyRole(['guanliceng', 'duchayuan', 'dj','fuwuyuan', 'yewuyuan'])" class="detail-item">
				<text class="label">业务员:</text>
				<view class="value-with-button">
					<button class="scan-btn" @click="scanCode">扫一扫</button>
				</view>
			</view>

			<!-- 业务员列表 -->
			<view v-if="hasRole('admin') || hasAnyRole(['guanliceng', 'duchayuan', 'dj','fuwuyuan', 'yewuyuan', 'yewujinli'])" class="salesperson-list">
				<view class="list-title">业务员列表</view>
				<view class="list-content" style="display: flex; flex-wrap: wrap;">
					<view 
						class="salesperson-item" 
						v-for="(item, index) in room.salespersonList" 
						:key="index"
						@click="handleSalespersonClick(item)"
						style="width: 45%; margin-right: 1%; margin-bottom: 12px; box-sizing: border-box;"
					>
						<text class="salesperson-id">{{ item.employeeId }}</text>
						<text class="salesperson-name">{{ item.name }}</text>
						<text class="salesperson-level">{{ item.level }}</text>
					</view>
				</view>
			</view>

			<!-- 业务员操作弹窗 -->
			<uni-popup ref="salespersonPopup" type="bottom">
				<view class="popup-content">
					<view class="popup-title">选择操作</view>
					<view class="action-list">
						<button class="action-item" @click="handleRemoveSalesperson">
							<text class="action-text">移除业务员</text>
						</button>
						<button class="action-item" @click="handleRequestChangeRoom">
							<text class="action-text">申请串台</text>
						</button>
					</view>
					<button class="cancel-btn" @click="closeSalespersonPopup">取消</button>
				</view>
			</uni-popup>

		

			<!-- 买单情况 -->
			<view  class="detail-section-title">买单情况</view>
			<view  class="detail-item">
				<text class="label">买单情况:</text>
				<view class="value-edit" style="display: flex; align-items: center;">
					<text>{{ room.payment || '未买单' }}</text>
					<button v-if="hasRole('duchayuan') && !paymentEditMode" class="edit-btn" @click="paymentEditMode = true" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">编辑</button>
					<template v-if="paymentEditMode">
						<input type="text" v-model="editForm.payment" class="edit-input" style="flex:1;" />
						<button class="save-btn" @click="savePayment" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">保存</button>
						<button class="cancel-btn" @click="cancelPaymentEdit" style="margin-left: 4px; font-size: 12px; padding: 2px 10px;">取消</button>
					</template>
				</view>
			</view>
			<view  class="detail-item">
				<text class="label">打折:</text>
				<view class="value-edit" style="display: flex; align-items: center;">
					<text>{{ room.discount }}</text>
					<button v-if="hasRole('duchayuan') && !discountEditMode" class="edit-btn" @click="discountEditMode = true" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">编辑</button>
					<template v-if="discountEditMode">
						<input type="text" v-model="editForm.discount" class="edit-input" style="flex:1;" />
						<button class="save-btn" @click="saveDiscount" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">保存</button>
						<button class="cancel-btn" @click="cancelDiscountEdit" style="margin-left: 4px; font-size: 12px; padding: 2px 10px;">取消</button>
					</template>
				</view>
			</view>
			<view  class="detail-item">
				<text class="label">服务员工资:</text>
				<view class="value-edit" style="display: flex; align-items: center;">
					<text>{{ room.serviceStaffPayment }}</text>
					<button v-if="hasRole('duchayuan') && !serviceStaffPaymentEditMode" class="edit-btn" @click="serviceStaffPaymentEditMode = true" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">编辑</button>
					<template v-if="serviceStaffPaymentEditMode">
						<picker :range="['挂账','自付','刷卡']" :value="['挂账','自付','刷卡'].indexOf(editForm.serviceStaffPayment)" @change="e => editForm.serviceStaffPayment = ['挂账','自付','刷卡'][e.detail.value]" style="flex:1;">
							<view class="picker-value">{{ editForm.serviceStaffPayment || '请选择支付方式' }}</view>
						</picker>
						<button class="save-btn" @click="saveServiceStaffPayment" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">保存</button>
						<button class="cancel-btn" @click="cancelServiceStaffPaymentEdit" style="margin-left: 4px; font-size: 12px; padding: 2px 10px;">取消</button>
					</template>
				</view>
			</view>
			<view  class="detail-item">
				<text class="label">DJ工资:</text>
				<view class="value-edit" style="display: flex; align-items: center;">
					<text>{{ room.djPayment }}</text>
					<button v-if="hasRole('duchayuan') && !djPaymentEditMode" class="edit-btn" @click="djPaymentEditMode = true" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">编辑</button>
					<template v-if="djPaymentEditMode">
						<picker :range="['挂账','自付','刷卡']" :value="['挂账','自付','刷卡'].indexOf(editForm.djPayment)" @change="e => editForm.djPayment = ['挂账','自付','刷卡'][e.detail.value]" style="flex:1;">
							<view class="picker-value">{{ editForm.djPayment || '请选择支付方式' }}</view>
						</picker>
						<button class="save-btn" @click="saveDjPayment" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">保存</button>
						<button class="cancel-btn" @click="cancelDjPaymentEdit" style="margin-left: 4px; font-size: 12px; padding: 2px 10px;">取消</button>
					</template>
				</view>
			</view>
			<view  class="detail-item">
				<text class="label">业务员工资:</text>
				<view class="value-edit" style="display: flex; align-items: center;">
					<text>{{ room.salespersonPayment }}</text>
					<button v-if="hasRole('duchayuan') && !salespersonPaymentEditMode" class="edit-btn" @click="salespersonPaymentEditMode = true" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">编辑</button>
					<template v-if="salespersonPaymentEditMode">
						<picker :range="['挂账','自付','刷卡']" :value="['挂账','自付','刷卡'].indexOf(editForm.salespersonPayment)" @change="e => editForm.salespersonPayment = ['挂账','自付','刷卡'][e.detail.value]" style="flex:1;">
							<view class="picker-value">{{ editForm.salespersonPayment || '请选择支付方式' }}</view>
						</picker>
						<button class="save-btn" @click="saveSalespersonPayment" style="margin-left: 8px; font-size: 12px; padding: 2px 10px;">保存</button>
						<button class="cancel-btn" @click="cancelSalespersonPaymentEdit" style="margin-left: 4px; font-size: 12px; padding: 2px 10px;">取消</button>
					</template>
				</view>
			</view>
			<view v-if="hasRole('admin') || hasAnyRole(['yewujinli'])" class="detail-item">
				<button class="scan-btn" 
					:class="{ 'scan-btn-disabled': room.status === 'fataizhong' }"
					@click="showFataiConfirm" 
					:disabled="room.status === 'fataizhong'">
					{{ room.status === 'fataizhong' ? '发台中' : '呼叫发台' }}
				</button>
			</view>

		

			<!-- 存酒信息区域 -->
			<!-- 存酒列表 -->
			
			<!-- 添加存酒表单 -->
	<!-- 		<view class="detail-section-title">存酒信息</view>
			
			
			<view class="wine-list">
				<view v-for="(wine, index) in wineList" :key="index" class="wine-item">
					<view class="wine-info">
						<text class="wine-name">{{ wine.wineName }}</text>
						<text class="wine-quantity">数量: {{ wine.quantity }}</text>
						<text class="wine-date">存酒日期: {{ wine.storageDate }}</text>
						<text class="wine-date">存酒人: {{ wine.userName }}</text>
					</view>
				</view>
			</view>

			<view class="add-wine-form">
				<view class="form-item">
					<text class="label">酒名:</text>
					<picker 
						:range="wineOptions" 
						:value="wineOptions.indexOf(selectedWine)"
						@change="handleWineSelect"
						class="wine-picker">
						<view class="picker-value">
							{{ selectedWine || '请选择酒名' }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">数量:</text>
					<input 
						type="number" 
						v-model="wineQuantity" 
						class="quantity-input"
						placeholder="请输入数量"
					/>
				</view>
				<view class="form-item">
					<text class="label">日期:</text>
					<picker 
						mode="date" 
						:value="wineDate"
						:start="startDate"
						:end="endDate"
						@change="handleDateSelect"
						class="date-picker">
						<view class="picker-value">
							{{ wineDate || '请选择日期' }}
						</view>
					</picker>
				</view>
				<button 
					class="add-wine-btn" 
					@click="handleAddWine"
					:disabled="!selectedWine || !wineQuantity || !wineDate">
					添加存酒
				</button>
			</view> -->

			<!-- 房间公告 -->
			<view class="detail-item announcement-item">
				<view class="announcement-header" style="display: flex; align-items: center; justify-content: center; position: relative;">
					<text class="announcement-label" style="flex: 1; text-align: center; font-weight: bold;">房间公告</text>
					<view style="position: absolute; right: 0; top: 0; display: flex; gap: 8px;">
						<button v-if="(hasRole('duchayuan')||hasRole('yewujinli')||hasRole('tongjiyuan')) && !announcementEditMode" class="edit-announcement-btn" @click="startAnnouncementEdit" style="font-size: 12px; padding: 2px 10px;">编辑</button>
						<button v-if="announcementEditMode" class="save-announcement-btn" @click="saveAnnouncement" style="font-size: 12px; padding: 2px 10px;">保存</button>
						<button v-if="announcementEditMode" class="cancel-announcement-btn" @click="cancelAnnouncementEdit" style="font-size: 12px; padding: 2px 10px;">取消</button>
					</view>
				</view>
				<view class="announcement-body">
					<view v-if="hasRole('duchayuan')||hasRole('yewujinli')||hasRole('tongjiyuan')" class="announcement-content">
						<textarea 
							v-if="announcementEditMode" 
							v-model="editForm.remark" 
							class="edit-textarea"
							placeholder="请输入房间公告"
							:maxlength="200"
							@input="handleRemarkInput"
						/>
						<text v-else class="announcement-text">{{ room.remark || '暂无公告' }}</text>
					</view>
					<view v-else class="announcement-content">
						<text class="announcement-text">{{ room.remark || '暂无公告' }}</text>
					</view>
				</view>
			</view>
			<!-- 翻台功能 -->
			<view v-if="hasRole('admin') || hasAnyRole(['duchayuan', 'yewujinli'])" class="detail-item">
				<button class="flip-table-btn" 
					@click="showFlipTableConfirm">
					翻台
				</button>
			</view>

			<view v-if="hasRole('admin') || hasAnyRole(['guanliceng', 'duchayuan', 'yewuyuan', 'yewujinli'])" class="detail-section-title">巡查情况</view>

			<!-- 反馈表单 -->
			<view v-if="hasRole('admin') || hasAnyRole(['guanliceng','fuwuyuan', 'duchayuan', 'yewuyuan', 'yewujinli'])" class="feedback-form">
				<view class="form-section">
					<view class="form-title">提交反馈</view>
					
					<!-- 照片上传部分 -->
				<view class="photo-section">
					<view class="photo-preview" v-if="photoUrl">
							<image :src="photoUrl" mode="widthFix" @click="previewImage" class="preview-image"></image>
							<view class="photo-actions">
								<button class="delete-btn" @click="deletePhoto">X</button>
					</view>
				</view>
						<view v-else class="photo-upload">
							<button class="upload-btn" 
								@click="takePhoto"
								:disabled="photoButtonDisabled"
								:class="{ 'upload-btn-disabled': photoButtonDisabled }">
								<text class="upload-icon">📷</text>
								<text v-if="!photoButtonDisabled">拍照</text>
								<text v-else>{{ photoButtonCountdown }}s</text>
							</button>
						</view>
						<button class="submit-btn" 
							:disabled="!photoUrl || isSubmittingPhoto" 
							@click="handleSubmitPhoto"
							:class="{ 'submit-btn-disabled': !photoUrl || isSubmittingPhoto }">
							<view v-if="isSubmittingPhoto" class="loading-spinner"></view>
							<text>{{ isSubmittingPhoto ? '提交中...' : '提交照片' }}</text>
						</button>
			</view>

					<!-- 问题反馈部分 -->
					<view class="problem-section">
					<textarea 
						v-model="problemDescription" 
							placeholder="请输入问题描述"
							class="problem-textarea"
							:maxlength="500"
							show-confirm-bar="false"
						/>
					<button class="submit-btn" 
							:disabled="!problemDescription || isSubmittingProblem" 
							@click="handleSubmitProblem"
							:class="{ 'submit-btn-disabled': !problemDescription || isSubmittingProblem }">
							<view v-if="isSubmittingProblem" class="loading-spinner"></view>
							<text>{{ isSubmittingProblem ? '提交中...' : '提交问题' }}</text>
					</button>
					</view>
				</view>
			</view>

			<!-- 添加反馈记录展示区域 -->
			<view v-if="hasRole('admin') || hasAnyRole(['guanliceng','fuwuyuan', 'duchayuan', 'yewuyuan', 'yewujinli'])" class="feedback-records">
				<view class="records-title">反馈记录</view>
				<view class="records-grid">
					<view v-for="(record, index) in feedbackRecords" :key="index" class="record-item" :class="{ 'text-only': !record.photoUrl }">
						<image v-if="record.photoUrl" :src="record.photoUrl" mode="aspectFill" @click="previewRecordImage(record.photoUrl)" class="record-image"></image>
						<view class="record-info" :class="{ 'full-width': !record.photoUrl }" @click="previewTextRecord(record)">
							<text class="record-user">{{ record.userName }}</text>
							<text class="record-time">{{ record.photoTime }}</text>
							<text class="record-description">{{ record.description }}</text>
						</view>
					</view>
				</view>
				<view v-if="feedbackRecords.length === 0" class="no-records">暂无反馈记录</view>
			</view>

			<view class="feedback-section">
				<view class="feedback-title">少爷反馈</view>
				<view class="feedback-list">
					<view class="feedback-row" v-for="(row, rowIndex) in chunkArray(feedbackFuwuyuanDj, 5)" :key="rowIndex">
						<view class="feedback-item" v-for="(item, index) in row" :key="index">
							<image :src="item.photoUrl" class="feedback-img" @click="previewFeedbackImage(item, feedbackFuwuyuanDj)"></image>
							<view class="feedback-meta">
								<view>{{ item.userName || '' }}</view>
								<view>{{ item.photoTime || '' }}</view>
							</view>
							<view class="feedback-desc">{{ item.description }}</view>
						</view>
					</view>
				</view>
				<view class="feedback-title">督查反馈</view>
				<view class="feedback-list">
					<view class="feedback-row" v-for="(row, rowIndex) in chunkArray(feedbackDuchayuan, 5)" :key="rowIndex">
						<view class="feedback-item" v-for="(item, index) in row" :key="index">
							<image :src="item.photoUrl" class="feedback-img" @click="previewFeedbackImage(item, feedbackDuchayuan)"></image>
							<view class="feedback-meta">
								<view>{{ item.userName || '' }}</view>
								<view>{{ item.photoTime || '' }}</view>
							</view>
							<view class="feedback-desc">{{ item.description }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 文字内容放大查看弹窗 -->
		<view v-if="showTextModal" class="text-modal-overlay" @click="closeTextModal">
			<view class="text-modal-content" @click.stop>
				<view class="text-modal-header">
					<text class="text-modal-title">反馈详情</text>
					<text class="text-modal-close" @click="closeTextModal">×</text>
				</view>
				<view class="text-modal-body">
					<view class="text-modal-user">{{ selectedTextRecord.userName }}</view>
					<view class="text-modal-time">{{ selectedTextRecord.photoTime }}</view>
					<view class="text-modal-description">{{ selectedTextRecord.description }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getToken } from '@/utils/auth'
	import { getRoom, updateRoom, flipTable } from '@/api/system/room'
	import { getUser, updateUser } from '@/api/system/user'
	import { addSalespersonToRoomGroup, removeSalespersonFromRoomGroup } from '@/api/system/room'
	import { uploadPhoto, submitFeedback } from '@/api/system/photo'
	import { listPicRecord } from '@/api/system/picRecord'
	import { listUsersByRole } from '@/api/system/user'
	import { listWine, addWine } from '@/api/system/wine'
	import { listUser } from '@/api/system/user'
	import { updateAttendance, addAttendance, listAttendance } from '@/api/system/attendance'
	import request from '@/utils/request'


	export default {
		data() {
			return {
				room: {},
				salespersonList: [], // 将从groupName中解析
				roles: [], // 存储用户角色
				loading: false, // 添加loading状态
				showScanner: false, // 控制扫码界面显示
				roomId: null,
				photoUrl: '', // 拍照后的图片URL
				problemDescription: '', // 问题描述
				feedbackRecords: [], // 存储反馈记录
				isEditMode: false, // 编辑模式状态
				businessManagers: [], // 存储业务经理列表
				serviceStaff: [], // 存储服务员列表
				djList: [], // 存储DJ列表
				editForm: {
					bookerId: '',
					bookerEntryCount: 0,
					serviceStaffId: '',
					serviceStaffEntryCount: 0,
					djId: '',
					payment: '',
					discount: '',
					serviceStaffPayment: '',
					djPayment: '',
					salespersonPayment: '',
					remark: '', // 用于编辑的公告内容
					ff: '', // 轮房人userId
					ee: '', // 轮房人userName
					createdAt: '', // 开始时间
				},
				isSubmittingPhoto: false,
				isSubmittingProblem: false,
				wineList: [], // 存酒列表
				wineOptions: [
					// 啤酒类
					'1664', '百威铝罐', '青岛铝罐', '科罗娜', '喜力铝罐', '百威听装',
					// 白兰地类
					'至尊', '路易十三', '马爹利尚选', '奥创', '马爹利XO', '人头马XO', '轩尼诗XO', '蓝带马爹利', '马爹利名仕', '轩尼诗VSOP',
					// 威士忌类
					'皇家礼炮', '芝华士12年', '黑方', '杰克丹尼', '麦卡伦12年',
					// 红酒类
					'威龙国际干白', '威龙国际干红', '卡斯特', '威龙有机干红', '威龙有机干白', '青稞干红', '青稞干白', '香槟'
				], // 完整酒名列表
				selectedWine: '', // 选中的酒名
				wineQuantity: '', // 存酒数量
				wineDate: '', // 存酒日期
				startDate: '2020-01-01', // 日期选择器开始日期
				endDate: new Date().toISOString().split('T')[0], // 日期选择器结束日期（今天）
				userList: [],
				selectedBooker: {},
				searchName: '',
				searchUserId: '', // 工号搜索
				paymentOptions: ['自付', '挂账', '刷卡'],
				selectedSalesperson: null, // 当前选中的业务员
				managerStaff: [], // 业务经理选择列表
				announcementEditMode: false, // 公告编辑模式
				paymentEditMode: false, // 买单情况编辑模式
				discountEditMode: false, // 打折编辑模式
				serviceStaffPaymentEditMode: false, // 服务员工资编辑模式
				djPaymentEditMode: false, // DJ工资编辑模式
				salespersonPaymentEditMode: false, // 业务员工资编辑模式
				// 拍照按钮倒计时相关
				photoButtonDisabled: false, // 拍照按钮是否禁用
				photoButtonCountdown: 0, // 倒计时秒数
				photoButtonTimer: null, // 倒计时定时器
				// 文字弹窗相关
				showTextModal: false, // 控制文字弹窗显示
				selectedTextRecord: {}, // 选中的文字记录
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.handleRefresh()
		},
		onLoad(options) {
			// 获取用户信息和角色
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.roles = userInfo.roles || [];
			} else if (getToken()) {
				console.warn('用户信息未在本地存储找到，请确保登录时已正确存储。');
			}

			// 检查并恢复拍照按钮倒计时状态
			this.checkAndRestorePhotoButtonCountdown();

			// 获取房间信息
			if (options.room) {
				const roomData = JSON.parse(decodeURIComponent(options.room));
				this.getRoomDetail(roomData.id);
				this.getWineList(roomData.id); // 获取存酒列表
				uni.setNavigationBarTitle({
					title: `房间详情 - ${roomData.id}`
				});
			} else {
				this.$modal.msgError('未获取到房间信息');
			}
			this.getUserList();
			// 新增：加载服务员、DJ和业务经理列表
			this.getServiceStaff();
			this.getDjList();
			this.getManagerStaff();
		},
		methods: {
			// 下拉刷新处理
			async handleRefresh() {
				try {
					// 刷新房间详情和反馈记录
					if (this.room && this.room.id) {
						await this.getRoomDetail(this.room.id)
					}
					
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 1500
					})
				} catch (error) {
					console.error('刷新失败:', error)
					uni.showToast({
						title: '刷新失败',
						icon: 'none',
						duration: 1500
					})
				} finally {
					uni.stopPullDownRefresh()
				}
			},
			// 获取房间详情
			async getRoomDetail(id) {
				this.loading = true; // 开始加载
				try {
					const res = await getRoom(id);
					if (res.code === 200) {
						this.room = {
							...res.data,
							// 直接使用后端返回的用户名信息
							bookerName: res.data.bookerName,
							serviceStaffName: res.data.serviceStaffName,
							djName: res.data.djName,
							// 解析业务员列表
							salespersonList: await this.parseSalespersonList(res.data.groupNameList),
							managerStaffName: res.data.managerStaffName || '',
						};
						// 获取反馈记录
						await this.getFeedbackRecords()
					} else {
						this.$modal.msgError(res.msg || '获取房间详情失败');
					}
				} catch (error) {
					this.$modal.msgError('获取房间详情失败');
				} finally {
					this.loading = false; // 结束加载
				}
			},
			// 解析业务员列表
			async parseSalespersonList(groupNameList) {
				if (!groupNameList || !Array.isArray(groupNameList)) return [];
				
				return groupNameList.map(user => ({
					id: user.userId,
					employeeId:user.employeeId,
					name: user.userName,
					level: user.level || '无'
				}));
			},
			async scanCode() {
				// #ifdef MP
				uni.scanCode({
					scanType: ['qrCode'], // 只扫描二维码
					success: async (res) => {
						this.handleScanResult(res.result);
					},
					fail: (err) => {
						console.error('扫码失败：', err);
						this.$modal.msgError('扫码失败');
					}
				});
				// #endif

				// #ifdef H5 || APP-PLUS
				this.$modal.msgError('扫码功能仅支持小程序环境');
				// #endif
			},


			// 处理扫码结果
			// 处理扫码结果
			async handleScanResult(result) {
				console.log('扫码结果：', result);
				try {
					// 尝试解析JSON
					const qrData = JSON.parse(result);
					if (qrData && qrData.userId) {
						const userId = qrData.userId;
						
						// 检查是否已经在列表中
						const existingSalesperson = this.room.salespersonList.find(item => item.id === userId);
						if (existingSalesperson) {
							this.$modal.msgError('该业务员已在列表中');
							return;
						}
						
						try {
							// 获取业务员信息
							console.log('开始获取业务员信息，userId:', userId);
							const userRes = await getUser(userId);
							console.log('获取业务员信息响应:', userRes);
							if (userRes.code === 200) {
								const salesperson = userRes.data;
								
								// 检查业务员是否已分配号码
								if (!salesperson.number || salesperson.number.trim() === '') {
									this.$modal.msgError('业务员未分配号码，无法扫进房间');
									return;
								}
								
								// 显示确认对话框
								uni.showModal({
									title: '添加业务员',
									content: `是否将业务员 ${salesperson.userName} (号码: ${salesperson.number}) 添加到预定业务员组？`,
									success: async (modalRes) => {
										if (modalRes.confirm) {
											try {
												// 调用后端API添加业务员到房间组
												const addRes = await addSalespersonToRoomGroup({
													roomId: this.room.id,
													salespersonUserId: userId
												});
												console.log('添加业务员响应:', addRes);
												if (addRes.code === 200) {
													this.$modal.msgSuccess('添加成功');
													// 刷新房间详情
													await this.getRoomDetail(this.room.id);

													// 更新业务员当天的考勤信息
													try {
														const today = new Date();
														const yyyy = today.getFullYear();
														const mm = String(today.getMonth() + 1).padStart(2, '0');
														const dd = String(today.getDate()).padStart(2, '0');
														const punchDate = `${yyyy}-${mm}-${dd}`;
														// 查询当天考勤
														const attRes = await listAttendance({ userId, punchDate });
														if (attRes.code === 200 && attRes.rows && attRes.rows.length > 0) {
															// 已有考勤，更新
															const attendance = attRes.rows[0];
															await updateAttendance({
																id: attendance.id,
																userId,
																userName: salesperson.userName,
																punchDate,
																aa: '业务员打卡并上班'
															});
														} else {
															// 没有考勤记录，创建新的考勤记录
															await addAttendance({
																userId,
																userName: salesperson.userName,
																punchDate,
																aa: '业务员打卡并上班'
															});
														}
													} catch (e) {
														console.error('更新业务员考勤信息失败', e);
													}
												} else {
													console.error('添加业务员失败，响应:', addRes);
													// 检查是否是"已在其他包厢上班"的错误
													// 注意：即使HTTP状态码是200，响应体中也可能包含错误信息
													if (addRes.msg && (addRes.msg.includes('只能加入一个房间') || addRes.msg.includes('已在其他包厢上班'))) {
														// 自动发起串台请求
														this.autoRequestChangeRoom(userId, salesperson.userName);
													} else {
														// 显示其他错误信息
														this.$modal.msgError(addRes.msg || '添加业务员失败');
													}
												}
											} catch (error) {
												console.error('添加业务员失败，错误详情:', error);
												console.error('错误类型:', typeof error);
												console.error('错误消息:', error.message);
												console.error('错误响应:', error.response);
												
												// 检查是否是500错误（该业务员只能加入一个房间）
												if (error === '500' || error.toString() === '500') {
													// 自动发起串台请求
													this.autoRequestChangeRoom(userId, salesperson.userName);
												} else {
													// 检查错误信息是否包含相关关键词
													// 错误信息可能在 error.message 或 error.msg 中
													const errorMsg = error.message || error.msg || error.toString();
													console.error('处理的错误信息:', errorMsg);
													if (errorMsg.includes('只能加入一个房间') || errorMsg.includes('已在其他包厢上班')) {
														// 自动发起串台请求
														this.autoRequestChangeRoom(userId, salesperson.userName);
													} else {
														this.$modal.msgError('添加业务员失败');
													}
												}
											}
										}
									}
								});
							} else {
								console.error('获取业务员信息失败，响应码:', userRes.code, '响应信息:', userRes.msg);
								this.$modal.msgError('获取业务员信息失败');
							}
						} catch (error) {
							console.error('获取业务员信息失败，错误详情:', error);
							this.$modal.msgError('获取业务员信息失败');
						}
					} else {
						console.error('无效的二维码数据:', qrData);
						this.$modal.msgError('无效的业务员二维码');
					}
				} catch (error) {
					console.error('解析二维码数据失败:', error);
					this.$modal.msgError('无效的业务员二维码');
				}
			},
			
			// 自动发起串台请求
			async autoRequestChangeRoom(userId, userName) {
				try {
					console.log('自动发起串台请求，userId:', userId, 'userName:', userName);
					
					// 获取业务员完整信息
					const userRes = await getUser(userId);
					if (userRes.code !== 200 || !userRes.data) {
						this.$modal.msgError('获取业务员信息失败');
						return;
					}
					
					const userData = userRes.data;
					const roleIds = userRes.roleIds || [];
					
					// 更新业务员状态为申请串台
					const updateRes = await updateUser({
						...userData,
						roleIds: roleIds,
						ee: '申请串台',
						bb: this.room.cc
					});
					
					if (updateRes.code === 200) {
						// 先显示"已在其他包厢上班请联系督查"的提示
						this.$modal.msgError('已在其他包厢上班请联系督查');
						// 然后显示自动发起串台请求的成功提示
						setTimeout(() => {
							this.$modal.msgSuccess(`业务员 ${userName} 已在其他包厢上班，已自动发起串台请求`);
						}, 1500);
						// 刷新房间信息
						await this.getRoomDetail(this.room.id);
					} else {
						this.$modal.msgError(updateRes.msg || '自动发起串台请求失败');
					}
				} catch (error) {
					console.error('自动发起串台请求失败:', error);
					this.$modal.msgError('自动发起串台请求失败');
				}
			},
			
			// 检查用户是否包含某个角色
			hasRole(role) {
				return this.roles.includes(role);
			},
			// 检查用户是否包含任一指定角色
			hasAnyRole(roles) {
				return roles.some(role => this.roles.includes(role));
			},
			// 显示发台确认弹窗
			showFataiConfirm() {
				uni.showModal({
					title: '确认呼叫',
					content: '是否确认呼叫发台？',
					success: (res) => {
						if (res.confirm) {
							this.callFatai()
						}
					}
				})
			},
			
			// 呼叫发台
			async callFatai() {
				try {
					// 创建完整的房间信息对象，只更新status字段
					const roomData = {
						...this.room,
						status: 'fataizhong'
					}
					
					const res = await updateRoom(roomData)
					
					if (res.code === 200) {
						this.$modal.msgSuccess('呼叫发台成功')
						// 刷新房间信息
						this.getRoomDetail(this.room.id)
					} else {
						this.$modal.msgError(res.msg || '呼叫发台失败')
					}
				} catch (error) {
					console.error('呼叫发台失败:', error)
					this.$modal.msgError('呼叫发台失败')
				}
			},
			
			// 拍照
			takePhoto() {
				// 检查是否为 duchayuan 角色
				const isDuchayuan = this.hasRole('duchayuan');
				
				// 如果不是 duchayuan 角色且按钮已禁用，直接返回
				if (!isDuchayuan && this.photoButtonDisabled) {
					return;
				}
				
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					sizeType: ['compressed'], // 使用系统自带的压缩选项
					success: (res) => {
						this.photoUrl = res.tempFilePaths[0]
						
						// 如果不是 duchayuan 角色，启动倒计时
						if (!isDuchayuan) {
							this.startPhotoButtonCountdown();
						}
					},
					fail: (err) => {
						console.error('拍照失败:', err)
						this.$modal.msgError('拍照失败')
					}
				})
			},
			
			// 预览图片
			previewImage() {
				uni.previewImage({
					urls: [this.photoUrl],
					current: this.photoUrl
				})
			},
			
			// 删除照片
			deletePhoto() {
				this.photoUrl = ''
			},
			
			// 上传图片
			uploadImage(filePath) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						// url: 'https://app.xyzttkx.site/system/photo/upload',
						// url: 'https://app.shuoshuohappy.site/system/photo/upload',
            url: 'https://app.shuoshuohappy.site/system/photo/upload',
						filePath: filePath,
						name: 'file',
						// 移除Authorization头，因为接口已经放行
						// header: {
						// 	'Authorization': 'Bearer ' + getToken()
						// },
						success: (res) => {
							console.log('上传响应:', res)
							try {
								const data = JSON.parse(res.data)
								if (data.code === 200) {
									resolve({
										url: data.data
									})
								} else {
									reject(new Error(data.msg || '上传失败'))
								}
							} catch (error) {
								console.error('解析响应失败:', error)
								reject(new Error('解析响应失败'))
							}
						},
						fail: (err) => {
							console.error('上传失败:', err)
							reject(new Error(err.errMsg || '上传失败'))
						}
					})
				})
			},
			
			// 处理提交照片
			async handleSubmitPhoto() {
				if (!this.photoUrl) {
					this.$modal.msgError('请先拍照')
					return
				}
				
				this.isSubmittingPhoto = true
				
				try {
					// 获取当前用户信息
					const userInfo = uni.getStorageSync('userInfo')
					if (!userInfo || !userInfo.user || !userInfo.user.userId || !userInfo.user.userName) {
						throw new Error('未获取到用户信息，请重新登录')
					}
					
					// 检查房间ID
					if (!this.room || !this.room.id) {
						throw new Error('未获取到房间信息')
					}
					
					// 上传图片
					const uploadRes = await this.uploadImage(this.photoUrl)
					
					if (!uploadRes.url) {
						throw new Error('图片上传失败')
					}
					
					// 格式化日期
					const now = new Date()
					const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
					
					// 构建反馈数据
					const roles = userInfo.roles || [] // 角色数组
					let aa = ''
					if (roles.includes('duchayuan')) {
					  aa = 'duchayuan'
					} else if (roles.includes('fuwuyuan')) {
					  aa = 'fuwuyuan'
					} else if (roles.includes('dj')) {
					  aa = 'dj'
					}

					const feedbackData = {
						roomId: this.room.id,
						userId: userInfo.user.userId,
						userName: userInfo.user.userName,
						photoUrl: uploadRes.url,
						photoTime: formattedDate,
						description: '', // 照片提交时不包含问题描述
						aa: aa
					}
					
					const res = await submitFeedback(feedbackData)
					if (res.code === 200) {
						this.$modal.msgSuccess('照片提交成功')
						this.photoUrl = '' // 清空照片
						this.getFeedbackRecords() // 刷新反馈记录
					} else {
						throw new Error(res.msg || '照片提交失败')
					}
				} catch (error) {
					console.error('照片提交失败:', error)
					this.$modal.msgError(error.message || '照片提交失败')
				} finally {
					this.isSubmittingPhoto = false
				}
			},
			
			// 处理提交问题
			async handleSubmitProblem() {
				if (!this.problemDescription) {
					this.$modal.msgError('请输入问题描述')
					return
				}
				
				this.isSubmittingProblem = true
				
				try {
					// 获取当前用户信息
					const userInfo = uni.getStorageSync('userInfo')
					if (!userInfo || !userInfo.user || !userInfo.user.userId || !userInfo.user.userName) {
						throw new Error('未获取到用户信息，请重新登录')
					}
					
					// 检查房间ID
					if (!this.room || !this.room.id) {
						throw new Error('未获取到房间信息')
					}
					
					// 格式化日期
					const now = new Date()
					const formattedDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
					
					// 构建反馈数据
					const feedbackData = {
						roomId: this.room.id,
						userId: userInfo.user.userId,
						userName: userInfo.user.userName,
						photoUrl: '', // 问题提交时不包含照片
						photoTime: formattedDate,
						description: this.problemDescription
					}
					
					const res = await submitFeedback(feedbackData)
					if (res.code === 200) {
						this.$modal.msgSuccess('问题提交成功')
						this.problemDescription = '' // 清空问题描述
						this.getFeedbackRecords() // 刷新反馈记录
					} else {
						throw new Error(res.msg || '问题提交失败')
					}
				} catch (error) {
					console.error('问题提交失败:', error)
					this.$modal.msgError(error.message || '问题提交失败')
				} finally {
					this.isSubmittingProblem = false
				}
			},
			// 获取反馈记录
			async getFeedbackRecords() {
				try {
					const userInfo = uni.getStorageSync('userInfo')
					if (!userInfo || !userInfo.user || !userInfo.user.userId) {
						throw new Error('未获取到用户信息')
					}

					// 获取今天的日期
					const today = new Date().toISOString().split('T')[0]; // YYYY-MM-DD

					const query = {
						pageNum: 1,
						pageSize: 100, // 增加页面大小以获取更多记录
						roomId: this.room.id
					}

					const res = await listPicRecord(query)
					if (res.code === 200) {
						// 过滤出今天的反馈记录
						const allRecords = res.rows || []
						this.feedbackRecords = allRecords.filter(record => {
							if (!record.photoTime) return false
							const recordDate = record.photoTime.split(' ')[0] // 取日期部分
							return recordDate === today
						})
						
						console.log('获取到的反馈记录:', this.feedbackRecords)
					} else {
						console.error('获取反馈记录失败:', res.msg)
					}
				} catch (error) {
					console.error('获取反馈记录失败:', error)
				}
			},
			// 预览记录中的图片
			previewRecordImage(url) {
				uni.previewImage({
					urls: [url],
					current: url
				})
			},
			// 预览文字记录
			previewTextRecord(record) {
				this.selectedTextRecord = record
				this.showTextModal = true
			},
			// 关闭文字弹窗
			closeTextModal() {
				this.showTextModal = false
				this.selectedTextRecord = {}
			},
			// 获取业务经理列表
			async getBusinessManagers() {
				try {
					const res = await listUsersByRole(105, null, 1, 1000)
					if (res.code === 200) {
						this.businessManagers = res.rows || []
					} else {
						this.$modal.msgError(res.msg || '获取业务经理列表失败')
					}
				} catch (error) {
					console.error('获取业务经理列表失败:', error)
					this.$modal.msgError('获取业务经理列表失败')
				}
			},
			// 获取服务员列表
			async getServiceStaff() {
				try {
					const res = await listUsersByRole(100, null, 1, 1000)
					if (res.code === 200) {
						this.serviceStaff = res.rows || []
					} else {
						this.$modal.msgError(res.msg || '获取服务员列表失败')
					}
				} catch (error) {
					console.error('获取服务员列表失败:', error)
					this.$modal.msgError('获取服务员列表失败')
				}
			},
			
			// 获取DJ列表
			async getDjList() {
				try {
					const res = await listUsersByRole(101, null, 1, 1000)
					if (res.code === 200) {
						this.djList = res.rows || []
					} else {
						this.$modal.msgError(res.msg || '获取DJ列表失败')
					}
				} catch (error) {
					console.error('获取DJ列表失败:', error)
					this.$modal.msgError('获取DJ列表失败')
				}
			},
			
			// 获取服务员名称
			getServiceStaffName() {
				const staff = this.serviceStaff.find(item => item.userId === this.editForm.serviceStaffId)
				return staff ? staff.userName : '请选择服务员'
			},
			
			// 获取DJ名称
			getDjName() {
				const dj = this.djList.find(item => item.userId === this.editForm.djId)
				return dj ? dj.userName : '请选择DJ'
			},
			// 切换编辑模式
			async toggleEditMode() {
				this.isEditMode = !this.isEditMode;
				if (!this.isEditMode) {
					// 从编辑模式切换到非编辑模式，表示"完成"或"保存"
					// 只有当room有id时才执行更新操作
					if (this.room && this.room.id) {
						// 处理开始时间：将选择的日期转换为中午12点的ISO时间格式
						let createdAt = this.room.createdAt;
						if (this.editForm.createdAt) {
							try {
								// 将选择的日期与中午12点组合
								const startDateTime = new Date(`${this.editForm.createdAt}T12:00:00.000+08:00`);
								createdAt = startDateTime.toISOString().replace('Z', '+08:00');
							} catch (error) {
								console.error('处理开始时间失败:', error);
							}
						}
						
						// 将editForm中的所有字段更新到room对象
						this.room = {
							...this.room,
							...this.editForm,
							status: "inuse",
							bookerId: this.editForm.bookerId,
							bookerName: this.editForm.bookerName,
							bookerEntryCount: this.editForm.bookerEntryCount,  // 保存订房人进房次数
							serviceStaffId: this.editForm.serviceStaffId,
							serviceStaffName: this.editForm.serviceStaffName,
							serviceStaffEntryCount: this.editForm.serviceStaffEntryCount,  // 保存服务员进房次数
							serviceStaffPayment: this.editForm.serviceStaffPayment,
							djPayment: this.editForm.djPayment,
							salespersonPayment: this.editForm.salespersonPayment,
							ee: this.editForm.ee, // 轮房人userName
							ff: this.editForm.ff, // 轮房人userId
							payment: this.editForm.payment, // 买单情况
							discount: this.editForm.discount, // 打折
							createdAt: createdAt, // 开始时间
						};
						
						try {
							await this.updateRoom();
							// 更新成功后，再刷新房间数据
							await this.getRoomDetail(this.room.id);
							uni.showToast({
								title: '房间信息更新成功',
								icon: 'success'
							});
						} catch (error) {
							console.error('更新房间信息失败', error);
							uni.showToast({
								title: '更新失败',
								icon: 'none'
							});
						}
					}
				} else {
					// 进入编辑模式时，将当前room的值复制到editForm，以便编辑
					// 处理开始时间：从createdAt中提取日期部分
					let createdAt = '';
					if (this.room.createdAt) {
						try {
							const date = new Date(this.room.createdAt);
							createdAt = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
						} catch (error) {
							console.error('解析开始时间失败:', error);
							createdAt = new Date().toISOString().split('T')[0]; // 使用今天的日期
						}
					} else {
						createdAt = new Date().toISOString().split('T')[0]; // 使用今天的日期
					}
					
					this.editForm = {
						...this.room,
						bookerId: this.room.bookerId,
						bookerName: this.room.bookerName,
						// 确保其他可编辑字段也被复制
						bookerEntryCount: this.room.bookerEntryCount,
						serviceStaffId: this.room.serviceStaffId,
						serviceStaffEntryCount: this.room.serviceStaffEntryCount,
						djId: this.room.djId,
						payment: this.room.payment,
						discount: this.room.discount,
						serviceStaffPayment: this.room.serviceStaffPayment,
						djPayment: this.room.djPayment,
						salespersonPayment: this.room.salespersonPayment,
						ee: this.room.ee || '',
						ff: this.room.ff || '',
						createdAt: createdAt, // 开始时间
					};
				}
			},
			// 获取订房人名称
			getBookerName() {
				const booker = this.businessManagers.find(item => item.userId === this.editForm.bookerId)
				return booker ? booker.userName : '请选择订房人'
			},
			// 获取存酒列表
			async getWineList(roomId) {
				try {
					const query = {
						roomId: roomId
					}
					const res = await listWine(query)
					if (res.code === 200) {
						this.wineList = res.rows || []
					} else {
						this.$modal.msgError(res.msg || '获取存酒列表失败')
					}
				} catch (error) {
					console.error('获取存酒列表失败:', error)
					this.$modal.msgError('获取存酒列表失败')
				}
			},

			// 处理酒名选择
			handleWineSelect(e) {
				this.selectedWine = this.wineOptions[e.detail.value]
			},

			// 处理日期选择
			handleDateSelect(e) {
				this.wineDate = e.detail.value
			},

			// 添加存酒
			async handleAddWine() {
				if (!this.selectedWine || !this.wineQuantity || !this.wineDate) {
					this.$modal.msgError('请选择酒名、输入数量并选择日期')
					return
				}

				try {
					const userInfo = uni.getStorageSync('userInfo')
					if (!userInfo || !userInfo.user) {
						throw new Error('未获取到用户信息')
					}

					const wineData = {
						userId: userInfo.user.userId,
						userName: userInfo.user.userName,
						roomId: this.room.id,
						roomName: this.room.name || `房间${this.room.id}`, // 确保提供房间名称
						wineName: this.selectedWine,
						quantity: parseInt(this.wineQuantity),
						storageDate: this.wineDate
					}

					const res = await addWine(wineData)
					if (res.code === 200) {
						this.$modal.msgSuccess('添加存酒成功')
						// 清空表单
						this.selectedWine = ''
						this.wineQuantity = ''
						this.wineDate = ''
						// 刷新存酒列表
						await this.getWineList(this.room.id)
					} else {
						this.$modal.msgError(res.msg || '添加存酒失败')
					}
				} catch (error) {
					console.error('添加存酒失败:', error)
					this.$modal.msgError('添加存酒失败')
				}
			},
			// 搜索用户
			onSearchUser() {
				this.getUserList(this.searchName);
			},
			// 通过工号搜索用户
			onSearchUserById() {
				this.getUserListById(this.searchUserId);
			},
			// 获取用户列表
			getUserList(name = '') {
				listUser({
					pageNum: 1,
					pageSize: 10,
					userName: name
				}).then(res => {
					this.userList = res.rows || res.data || [];
				});
			},
			// 通过工号获取用户列表
			getUserListById(employeeId = '') {
				listUser({
					pageNum: 1,
					pageSize: 10,
					employeeId: employeeId
				}).then(res => {
					this.userList = res.rows || res.data || [];
				});
			},
			// 选择订房人
			onBookerChange(e) {
				this.selectedBooker = this.userList[e.detail.value];
				// 将选中的订房人信息赋值给editForm，以便在完成编辑时提交
				this.editForm.bookerId = this.selectedBooker.userId;
				this.editForm.bookerName = this.selectedBooker.userName;
			},
			// 更新房间信息
			async updateRoom() {
				try {
					const res = await updateRoom(this.room);
					if (res.code === 200) {
						uni.showToast({
							title: '房间信息更新成功',
							icon: 'success'
						});
					} else {
						console.error('更新房间信息失败', res.msg);
						uni.showToast({
							title: '更新失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('更新房间信息失败', error);
					uni.showToast({
						title: '更新失败',
						icon: 'none'
					});
				}
			},
			// 处理业务员点击
			handleSalespersonClick(salesperson) {
				console.log('点击业务员:', salesperson)
				// 只有DJ和服务员角色可以操作
				if (this.hasRole('dj') || this.hasRole('fuwuyuan')|| this.hasRole('duchayuan')) {
					this.selectedSalesperson = salesperson
					console.log('设置selectedSalesperson:', this.selectedSalesperson)
					this.$refs.salespersonPopup.open()
				}
			},
			
			// 关闭业务员操作弹窗
			closeSalespersonPopup() {
				this.$refs.salespersonPopup.close()
				this.selectedSalesperson = null
			},
			
			// 处理移除业务员
			async handleRemoveSalesperson() {
				if (!this.selectedSalesperson) return
				
				// 检查当前用户角色
				const isDuchayuan = this.hasRole('duchayuan')
				
				if (isDuchayuan) {
					// 督察角色可以直接移除
					try {
						uni.showModal({
							title: '确认移除',
							content: `确定要移除业务员 ${this.selectedSalesperson.name} 吗？`,
							success: async (res) => {
								if (res.confirm) {
									try {
										const roomId = this.room.id
										const salespersonUserId = this.selectedSalesperson.id || this.selectedSalesperson.userId
										console.log('调用/removeywy，参数:', { roomId, salespersonUserId })
										// 调用后端移除业务员接口
										const removeRes = await removeSalespersonFromRoomGroup({ roomId, salespersonUserId })
										console.log('/removeywy返回:', removeRes)
										if (removeRes.code === 200) {
											this.$modal.msgSuccess('移除业务员成功')
											this.closeSalespersonPopup()
											// 刷新房间信息
											this.getRoomDetail(this.room.id)
										} else {
											this.$modal.msgError(removeRes.msg || '移除业务员失败')
										}
									} catch (error) {
										console.error('移除业务员失败:', error)
										this.$modal.msgError('移除业务员失败')
									}
								}
							}
						})
					} catch (error) {
						console.error('移除业务员失败:', error)
						this.$modal.msgError('移除业务员失败')
					}
				} else {
					// 非督察角色需要提交申请
					try {
						uni.showModal({
							title: '申请移除',
							content: `确定要为业务员 ${this.selectedSalesperson.name} 申请移除吗？`,
							success: async (res) => {
								if (res.confirm) {
									try {
										// 打印业务员信息
										console.log('申请移除 selectedSalesperson:', JSON.parse(JSON.stringify(this.selectedSalesperson)))
										const userId = this.selectedSalesperson.id || this.selectedSalesperson.userId
										console.log('调用getUser，传入ID:', userId)
										if (!userId) {
											this.$modal.msgError('未获取到业务员ID')
											return
										}
										// 获取业务员完整信息
										const userRes = await getUser(userId)
										console.log('getUser返回:', userRes)
										if (userRes.code !== 200 || !userRes.data) {
											this.$modal.msgError('获取业务员信息失败')
											console.error('获取业务员信息失败:', userRes)
											return
										}
										const userData = userRes.data
										const roleIds = userRes.roleIds || []
										console.log('准备调用updateUser，参数:', { ...userData, roleIds, ff: '申请移除', gg: this.room.id.toString() })
										// 更新业务员状态为申请移除，并将房间ID设为gg值
										const updateRes = await updateUser({
											...userData,
											roleIds: roleIds,
											ff: '申请移除',
											gg: this.room.id.toString()
										})
										console.log('updateUser返回:', updateRes)
										if (updateRes.code === 200) {
											this.$modal.msgSuccess('申请移除成功')
											this.closeSalespersonPopup()
											// 刷新房间信息
											this.getRoomDetail(this.room.id)
										} else {
											this.$modal.msgError(updateRes.msg || '申请移除失败')
										}
									} catch (error) {
										console.error('申请移除失败:', error)
										this.$modal.msgError('申请移除失败')
									}
								}
							}
						})
					} catch (error) {
						console.error('申请移除失败:', error)
						this.$modal.msgError('申请移除失败')
					}
				}
			},
			
			// 处理申请串台
			async handleRequestChangeRoom() {
				if (!this.selectedSalesperson) return

				try {
					uni.showModal({
						title: '申请串台',
						content: `确定要为业务员 ${this.selectedSalesperson.name} 申请串台吗？`,
						success: async (res) => {
							if (res.confirm) {
								try {
									// 打印业务员信息
									console.log('申请串台 selectedSalesperson:', JSON.parse(JSON.stringify(this.selectedSalesperson)))
									const userId = this.selectedSalesperson.id || this.selectedSalesperson.userId
									console.log('调用getUser，传入ID:', userId)
									if (!userId) {
										this.$modal.msgError('未获取到业务员ID')
										return
									}
									// 获取业务员完整信息
									const userRes = await getUser(userId)
									console.log('getUser返回:', userRes)
									if (userRes.code !== 200 || !userRes.data) {
										this.$modal.msgError('获取业务员信息失败')
										console.error('获取业务员信息失败:', userRes)
										return
									}
									const userData = userRes.data
									const roleIds = userRes.roleIds || []
									console.log('准备调用updateUser，参数:', { ...userData, roleIds, ee: '申请串台' })
									// 更新业务员状态为申请串台
									const updateRes = await updateUser({
										...userData,
										roleIds: roleIds,
										ee: '申请串台',
										bb: this.room.cc
									})
									console.log('updateUser返回:', updateRes)
									if (updateRes.code === 200) {
										this.$modal.msgSuccess('申请串台成功')
										this.closeSalespersonPopup()
										// 刷新房间信息
										this.getRoomDetail(this.room.id)
									} else {
										this.$modal.msgError(updateRes.msg || '申请串台失败')
									}
								} catch (error) {
									console.error('申请串台失败:', error)
									this.$modal.msgError('申请串台失败')
								}
							}
						}
					})
				} catch (error) {
					console.error('申请串台失败:', error)
					this.$modal.msgError('申请串台失败')
				}
			},
			// 保存房间信息时包含公告
			async saveRoomInfo() {
				try {
					// 兜底：如果订房人未选，使用原有订房人
					if (!this.editForm.bookerId) {
						this.editForm.bookerId = this.room.bookerId;
					}
					if (!this.editForm.bookerName) {
						this.editForm.bookerName = this.room.bookerName;
					}
					// 构建要保存的数据
					const saveData = {
						id: this.room.id,
						roomName: this.room.roomName,
						roomType: this.room.roomType,
						status: this.room.status,
						bookerName: this.editForm.bookerName,
						bookerId: this.editForm.bookerId,
						bookerPhone: this.room.bookerPhone,
						bookTime: this.room.bookTime,
						startTime: this.room.startTime,
						endTime: this.room.endTime,
						djName: this.room.djName,
						salespersonList: this.room.salespersonList,
						remark: this.editForm.remark, // 使用编辑表单中的公告内容
						updateBy: this.userInfo.user.userName,
						area: this.room.area,
						price: this.room.price,
						discount: this.room.discount,
						totalAmount: this.room.totalAmount,
						bookerEntryCount: this.room.bookerEntryCount,
						djEntryCount: this.room.djEntryCount,
						serviceStaffEntryCount: this.room.serviceStaffEntryCount,
						bookerPayment: this.room.bookerPayment,
						djPayment: this.room.djPayment,
						serviceStaffPayment: this.room.serviceStaffPayment,
						salespersonPayment: this.room.salespersonPayment
					}
					
					console.log('保存的房间数据:', saveData) // 添加日志
					
					// 调用保存API
					const res = await updateRoom(saveData)
					if (res.code === 200) {
						this.$modal.msgSuccess('保存成功')
						this.isEditMode = false
						// 刷新房间信息，添加room.id参数
						await this.getRoomDetail(this.room.id)
					} else {
						this.$modal.msgError(res.msg || '保存失败')
					}
				} catch (error) {
					console.error('保存房间信息失败:', error)
					this.$modal.msgError('保存失败')
				}
			},
			// 处理公告输入
			handleRemarkInput(e) {
				this.editForm.remark = e.detail.value
			},
			
			// 进入编辑模式时初始化表单
			initEditForm() {
				// 从现有时间中提取日期部分，如果没有则使用今天
				let createdAt = '';
				if (this.room.createdAt) {
					try {
						const date = new Date(this.room.createdAt);
						createdAt = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
					} catch (error) {
						console.error('解析开始时间失败:', error);
						createdAt = new Date().toISOString().split('T')[0]; // 使用今天的日期
					}
				} else {
					createdAt = new Date().toISOString().split('T')[0]; // 使用今天的日期
				}
				
				this.editForm = {
					remark: this.room.remark || '',
					bookerId: this.room.bookerId,
					bookerName: this.room.bookerName,
					bookerEntryCount: this.room.bookerEntryCount || 0,  // 添加订房人进房次数
					serviceStaffId: this.room.serviceStaffId,
					serviceStaffName: this.room.serviceStaffName,
					serviceStaffEntryCount: this.room.serviceStaffEntryCount || 0,  // 添加服务员进房次数
					djId: this.room.djId,
					djName: this.room.djName,
					payment: this.room.payment,
					discount: this.room.discount,
					serviceStaffPayment: this.room.serviceStaffPayment,
					djPayment: this.room.djPayment,
					salespersonPayment: this.room.salespersonPayment,
					ee: this.room.ee || '',
					ff: this.room.ff || '',
					createdAt: createdAt, // 开始时间
				}
			},
			// 申请串台
			async handleApplyChuantai() {
				console.log('当前selectedSalesperson:', this.selectedSalesperson)
				if (!this.selectedSalesperson || !this.selectedSalesperson.id) {
					this.$modal.msgError('未获取到业务员ID，无法申请串台')
					console.error('selectedSalesperson或id无效:', this.selectedSalesperson)
					return
				}
				
				uni.showModal({
					title: '申请串台',
					content: `确定要为业务员 ${this.selectedSalesperson.name} 申请串台吗？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								console.log('调用getUser，传入ID:', this.selectedSalesperson.id)
								// 获取业务员完整信息
								const userRes = await getUser(this.selectedSalesperson.id)
								console.log('getUser返回:', userRes)
								if (userRes.code !== 200 || !userRes.data) {
									this.$modal.msgError('获取业务员信息失败')
									console.error('获取业务员信息失败:', userRes)
									return
								}
								
								const userData = userRes.data
								const roleIds = userRes.roleIds || []
								console.log('准备调用updateUser，参数:', { ...userData, roleIds, ee: '申请串台' })
								// 更新业务员状态为申请串台
								const updateRes = await updateUser({
									...userData,
									roleIds: roleIds,
									ee: '申请串台',
									bb: this.room.cc
								})
								console.log('updateUser返回:', updateRes)
								if (updateRes.code === 200) {
									this.$modal.msgSuccess('申请串台成功')
									this.closeSalespersonPopup()
									// 刷新房间信息
									this.getRoomDetail()
								} else {
									this.$modal.msgError(updateRes.msg || '申请串台失败')
								}
							} catch (error) {
								console.error('申请串台失败:', error)
								this.$modal.msgError('申请串台失败')
							}
						}
					}
				})
			},
			getManagerStaffName(ff = this.editForm.ff) {
				const staff = this.managerStaff.find(item => item.ff === ff);
				return staff ? staff.ee : '';
			},
			async getManagerStaff() {
				try {
					const res = await listUsersByRole(105, null, 1, 1000); // 105为业务经理角色ID，传递分页参数
					if (res.code === 200) {
						// 关键：映射字段，保证picker能用ee/ff
						this.managerStaff = (res.rows || []).map(item => ({
							...item,
							ee: item.userName, // picker显示名
							ff: item.userId    // picker选中值
						}));
					} else {
						this.$modal.msgError(res.msg || '获取业务经理列表失败');
					}
				} catch (error) {
					this.$modal.msgError('获取业务经理列表失败');
				}
			},
			onServiceStaffChange(e) {
				const staff = this.serviceStaff[e.detail.value];
				this.editForm.serviceStaffId = staff.userId;
				this.editForm.serviceStaffName = staff.userName;
			},
			onDjChange(e) {
				const dj = this.djList[e.detail.value];
				this.editForm.djId = dj.userId;
				this.editForm.djName = dj.userName;
			},
			// 处理开始日期变化
			onStartDateChange(e) {
				this.editForm.createdAt = e.detail.value;
			},
			// 格式化开始时间显示
			formatStartTime(createdAt) {
				if (!createdAt) return '未设置';
				try {
					const date = new Date(createdAt);
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				} catch (error) {
					console.error('格式化时间失败:', error);
					return '时间格式错误';
				}
			},
			startAnnouncementEdit() {
				// 进入编辑模式时，同步当前的公告内容到编辑表单
				this.editForm.remark = this.room.remark || '';
				this.announcementEditMode = true;
			},
			saveAnnouncement() {
				// 只保存公告，按接口要求只传 id 和 remark 字段
				const userInfo = uni.getStorageSync('userInfo');
				const updateBy = userInfo && userInfo.user ? userInfo.user.userName : '';
				updateRoom({ id: this.room.id, remark: this.editForm.remark, updateBy }).then(res => {
					if (res.code === 200) {
						this.$modal.msgSuccess('保存成功')
						this.announcementEditMode = false
						this.getRoomDetail(this.room.id)
					} else {
						this.$modal.msgError(res.msg || '保存失败')
					}
				}).catch(err => {
					this.$modal.msgError('保存失败')
				})
			},
			cancelAnnouncementEdit() {
				// 恢复原内容
				this.editForm.remark = this.room.remark || '';
				this.announcementEditMode = false;
			},
			async savePayment() {
				this.paymentEditMode = false;
				try {
					const res = await updateRoom({ id: this.room.id, payment: this.editForm.payment });
					if (res.code === 200) {
						this.$modal && this.$modal.msgSuccess ? this.$modal.msgSuccess('保存成功') : uni.showToast({ title: '保存成功', icon: 'success' });
						await this.getRoomDetail(this.room.id);
					} else {
						this.$modal && this.$modal.msgError ? this.$modal.msgError(res.msg || '保存失败') : uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
					}
				} catch (e) {
					this.$modal && this.$modal.msgError ? this.$modal.msgError('保存失败') : uni.showToast({ title: '保存失败', icon: 'none' });
				}
			},
			cancelPaymentEdit() {
				// 取消买单情况编辑
				this.paymentEditMode = false;
				this.editForm.payment = this.room.payment;
			},
			async saveDiscount() {
				this.discountEditMode = false;
				try {
					const res = await updateRoom({ id: this.room.id, discount: this.editForm.discount });
					if (res.code === 200) {
						this.$modal && this.$modal.msgSuccess ? this.$modal.msgSuccess('保存成功') : uni.showToast({ title: '保存成功', icon: 'success' });
						await this.getRoomDetail(this.room.id);
					} else {
						this.$modal && this.$modal.msgError ? this.$modal.msgError(res.msg || '保存失败') : uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
					}
				} catch (e) {
					this.$modal && this.$modal.msgError ? this.$modal.msgError('保存失败') : uni.showToast({ title: '保存失败', icon: 'none' });
				}
			},
			cancelDiscountEdit() {
				this.discountEditMode = false;
				this.editForm.discount = this.room.discount;
			},
			async saveServiceStaffPayment() {
				this.serviceStaffPaymentEditMode = false;
				try {
					const res = await updateRoom({ id: this.room.id, serviceStaffPayment: this.editForm.serviceStaffPayment });
					if (res.code === 200) {
						this.$modal && this.$modal.msgSuccess ? this.$modal.msgSuccess('保存成功') : uni.showToast({ title: '保存成功', icon: 'success' });
						await this.getRoomDetail(this.room.id);
					} else {
						this.$modal && this.$modal.msgError ? this.$modal.msgError(res.msg || '保存失败') : uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
					}
				} catch (e) {
					this.$modal && this.$modal.msgError ? this.$modal.msgError('保存失败') : uni.showToast({ title: '保存失败', icon: 'none' });
				}
			},
			cancelServiceStaffPaymentEdit() {
				this.serviceStaffPaymentEditMode = false;
				this.editForm.serviceStaffPayment = this.room.serviceStaffPayment;
			},
			async saveDjPayment() {
				this.djPaymentEditMode = false;
				try {
					const res = await updateRoom({ id: this.room.id, djPayment: this.editForm.djPayment });
					if (res.code === 200) {
						this.$modal && this.$modal.msgSuccess ? this.$modal.msgSuccess('保存成功') : uni.showToast({ title: '保存成功', icon: 'success' });
						await this.getRoomDetail(this.room.id);
					} else {
						this.$modal && this.$modal.msgError ? this.$modal.msgError(res.msg || '保存失败') : uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
					}
				} catch (e) {
					this.$modal && this.$modal.msgError ? this.$modal.msgError('保存失败') : uni.showToast({ title: '保存失败', icon: 'none' });
				}
			},
			cancelDjPaymentEdit() {
				this.djPaymentEditMode = false;
				this.editForm.djPayment = this.room.djPayment;
			},
			async saveSalespersonPayment() {
				this.salespersonPaymentEditMode = false;
				try {
					const res = await updateRoom({ id: this.room.id, salespersonPayment: this.editForm.salespersonPayment });
					if (res.code === 200) {
						this.$modal && this.$modal.msgSuccess ? this.$modal.msgSuccess('保存成功') : uni.showToast({ title: '保存成功', icon: 'success' });
						await this.getRoomDetail(this.room.id);
					} else {
						this.$modal && this.$modal.msgError ? this.$modal.msgError(res.msg || '保存失败') : uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
					}
				} catch (e) {
					this.$modal && this.$modal.msgError ? this.$modal.msgError('保存失败') : uni.showToast({ title: '保存失败', icon: 'none' });
				}
			},
			cancelSalespersonPaymentEdit() {
				this.salespersonPaymentEditMode = false;
				this.editForm.salespersonPayment = this.room.salespersonPayment;
			},
			chunkArray(arr, size) {
				const result = []
				for (let i = 0; i < arr.length; i += size) {
					result.push(arr.slice(i, i + size))
				}
				return result
			},
			previewFeedbackImage(item, list) {
				const urls = list.map(i => i.photoUrl).filter(Boolean)
				const current = item.photoUrl
				uni.previewImage({
					urls,
					current
				})
			},
			// 启动拍照按钮倒计时
			startPhotoButtonCountdown() {
				// 清除之前的定时器
				if (this.photoButtonTimer) {
					clearInterval(this.photoButtonTimer);
				}
				
				// 设置倒计时时间（2分钟 = 120秒）
				this.photoButtonCountdown = 180;
				this.photoButtonDisabled = true;
				
				// 保存倒计时状态到本地存储
				const countdownData = {
					endTime: Date.now() + (180 * 1000), // 结束时间戳
					userId: uni.getStorageSync('userInfo')?.user?.userId || 'unknown'
				};
				uni.setStorageSync('photoButtonCountdown', countdownData);
				
				// 启动定时器
				this.photoButtonTimer = setInterval(() => {
					this.photoButtonCountdown--;
					
					// 倒计时结束
					if (this.photoButtonCountdown <= 0) {
						this.stopPhotoButtonCountdown();
					}
				}, 1000);
			},
			
			// 停止拍照按钮倒计时
			stopPhotoButtonCountdown() {
				if (this.photoButtonTimer) {
					clearInterval(this.photoButtonTimer);
					this.photoButtonTimer = null;
				}
				this.photoButtonDisabled = false;
				this.photoButtonCountdown = 0;
				
				// 清除本地存储的倒计时状态
				uni.removeStorageSync('photoButtonCountdown');
			},
			
			// 检查并恢复拍照按钮倒计时状态
			checkAndRestorePhotoButtonCountdown() {
				try {
					const countdownData = uni.getStorageSync('photoButtonCountdown');
					if (!countdownData) {
						return; // 没有倒计时状态
					}
					
					// 检查是否是当前用户
					const currentUserId = uni.getStorageSync('userInfo')?.user?.userId || 'unknown';
					if (countdownData.userId !== currentUserId) {
						// 不是当前用户，清除状态
						uni.removeStorageSync('photoButtonCountdown');
						return;
					}
					
					// 检查倒计时是否已结束
					const now = Date.now();
					const remainingTime = Math.ceil((countdownData.endTime - now) / 1000);
					
					if (remainingTime <= 0) {
						// 倒计时已结束，清除状态
						uni.removeStorageSync('photoButtonCountdown');
						return;
					}
					
					// 恢复倒计时状态
					this.photoButtonCountdown = remainingTime;
					this.photoButtonDisabled = true;
					
					// 启动定时器
					this.photoButtonTimer = setInterval(() => {
						this.photoButtonCountdown--;
						
						// 倒计时结束
						if (this.photoButtonCountdown <= 0) {
							this.stopPhotoButtonCountdown();
						}
					}, 1000);
					
					console.log(`恢复拍照按钮倒计时，剩余时间：${remainingTime}秒`);
				} catch (error) {
					console.error('恢复拍照按钮倒计时状态失败：', error);
					// 出错时清除可能损坏的状态
					uni.removeStorageSync('photoButtonCountdown');
				}
			},
			// 显示翻台确认弹窗
			showFlipTableConfirm() {
				uni.showModal({
					title: '确认翻台',
					content: '翻台将备份当前房间信息到记录表并清空房间，确定要翻台吗？',
					success: (res) => {
						if (res.confirm) {
							this.handleFlipTable()
						}
					}
				})
			},
			// 处理翻台
			async handleFlipTable() {
				try {
					const res = await flipTable(this.room.id)
					
					if (res.code === 200) {
						this.$modal.msgSuccess('翻台成功')
						// 刷新房间信息
						await this.getRoomDetail(this.room.id)
					} else {
						this.$modal.msgError(res.msg || '翻台失败')
					}
				} catch (error) {
					console.error('翻台失败:', error)
					this.$modal.msgError('翻台失败')
				}
			},
		},
		// 在进入编辑模式时，初始化selectedBooker和searchName
		watch: {
			isEditMode(newVal) {
				if (newVal) {
					// 当进入编辑模式时，将当前room的订房人信息同步到selectedBooker
					if (this.room.bookerId && this.room.bookerName) {
						this.selectedBooker = { userId: this.room.bookerId, userName: this.room.bookerName };
						this.searchName = this.room.bookerName;
					} else {
						this.selectedBooker = {};
						this.searchName = '';
						this.searchUserId = '';
					}
					// 重新加载用户列表以初始化picker，可能需要清空搜索词
					this.getUserList('');
					// 进入编辑模式时初始化表单
					this.initEditForm()
				} else {
					// 退出编辑模式时，重新获取最新数据，添加room.id参数
					this.getRoomDetail(this.room.id)
				}
			}
		},
		computed: {
			managerStaff() {
				// 只保留业务经理角色，假设roleName为业务经理
				return this.serviceStaff.filter(item => item.roleName === '业务经理');
			},
			feedbackFuwuyuanDj() {
				const today = new Date().toISOString().split('T')[0]; // 获取今天的日期 YYYY-MM-DD
				return this.feedbackRecords.filter(item => {
					// 检查角色
					const isCorrectRole = item.aa === 'fuwuyuan' || item.aa === 'dj';
					// 检查日期是否为今天
					const itemDate = item.photoTime ? item.photoTime.split(' ')[0] : '';
					const isToday = itemDate === today;
					return isCorrectRole && isToday;
				});
			},
			feedbackDuchayuan() {
				const today = new Date().toISOString().split('T')[0]; // 获取今天的日期 YYYY-MM-DD
				return this.feedbackRecords.filter(item => {
					// 检查角色
					const isCorrectRole = item.aa === 'duchayuan';
					// 检查日期是否为今天
					const itemDate = item.photoTime ? item.photoTime.split(' ')[0] : '';
					const isToday = itemDate === today;
					return isCorrectRole && isToday;
				});
			}
		},
		onUnload() {
			// 如果倒计时还在进行，保存当前状态
			if (this.photoButtonDisabled && this.photoButtonCountdown > 0) {
				const countdownData = {
					endTime: Date.now() + (this.photoButtonCountdown * 1000),
					userId: uni.getStorageSync('userInfo')?.user?.userId || 'unknown'
				};
				uni.setStorageSync('photoButtonCountdown', countdownData);
			}
			
			// 清理定时器
			if (this.photoButtonTimer) {
				clearInterval(this.photoButtonTimer);
				this.photoButtonTimer = null;
			}
		},
	}
</script>

<style lang="scss" scoped>
.room-detail-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding: 30rpx;
}

.detail-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.card-title {
			margin-bottom: 0;
		}
		
		.edit-mode-btn {
			padding: 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			background-color: #409eff;
			color: #fff;
			border: none;
			border-radius: 30rpx;
			
			&.active {
				background-color: #67c23a;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
	}

	.detail-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;

		&:last-child {
			border-bottom: none;
		}

		.detail-row {
			display: flex;
			width: 100%;
			gap: 40rpx;
		}

		.detail-col {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.label {
				font-size: 28rpx;
				color: #666;
				/* 移除 margin-right，让标签和内容紧贴 */
			}
			
			.value-edit {
				flex: 1;
				display: flex;
				align-items: center;
				gap: 10rpx;
				
				.edit-input {
					width: 100%;
					height: 60rpx;
					border: 1rpx solid #dcdfe6;
					border-radius: 4rpx;
					padding: 0 10rpx;
					font-size: 28rpx;
					background-color: #fff;
					
					&:focus {
						border-color: #409eff;
						outline: none;
					}
				}
				
				.edit-picker {
					width: 100%;
					height: 40px;
					line-height: 40px;
					padding: 0 10px;
					border: 1px solid #dcdfe6;
					border-radius: 4px;
					background-color: #fff;
				}
			}
		}
	}

	.value-with-button {
		display: flex;
		align-items: center;
		gap: 20rpx;
		flex: 1;
		justify-content: flex-end;
	}

	.scan-btn {
		margin: 0;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 30rpx;
		
		&.scan-btn-disabled {
			background-color: #67C23A;
			opacity: 1;
		}
		
		&:disabled {
			opacity: 1;
		}
	}

	.flip-table-btn {
		margin: 0 auto;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		background-color: #E6A23C;
		color: #fff;
		border-radius: 30rpx;
		width: 40%;
		display: block;
		
		&:active {
			opacity: 0.8;
		}
	}

	.salesperson-list {
		margin-top: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;

		.list-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.list-content {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
		}

		.salesperson-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			}

		.salesperson-id,
		.salesperson-name,
		.salesperson-level {
				flex: 1;
			text-align: center;
			font-size: 28rpx;
				color: #333;
		}
	}

	.detail-section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 2rpx solid #eee;
	}

	.loading-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(245, 247, 250, 0.95);
		z-index: 999;

		.loading-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 60rpx;
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.15);
			transform: translateY(-40rpx);
		}

		.loading-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
			width: 160rpx;
			height: 160rpx;
			position: relative;
		}

		.loading-dot {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: #007AFF;
			animation: bounce 1.4s infinite ease-in-out both;

			&:nth-child(1) {
				left: 0;
				animation-delay: -0.32s;
			}

			&:nth-child(2) {
				left: 50%;
				transform: translateX(-50%);
				animation-delay: -0.16s;
			}

			&:nth-child(3) {
				right: 0;
			}
		}

		.loading-text-container {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.loading-text {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			margin-right: 8rpx;
		}

		.loading-dots {
			display: flex;
			align-items: center;
			height: 36rpx;

			text {
				font-size: 36rpx;
				font-weight: 600;
				color: #007AFF;
				animation: dots 1.4s infinite ease-in-out both;

				&:nth-child(1) {
					animation-delay: -0.32s;
				}

				&:nth-child(2) {
					animation-delay: -0.16s;
				}
			}
		}
	}

	@keyframes bounce {
		0%, 80%, 100% {
			transform: scale(0);
			opacity: 0.5;
		}
		40% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes dots {
		0%, 80%, 100% {
			opacity: 0.2;
			transform: translateY(0);
		}
		40% {
			opacity: 1;
			transform: translateY(-10rpx);
		}
	}

	.scanner-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		
		.scanner-header {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: rgba(0,0,0,0.8);
			
			.scanner-title {
				color: #fff;
				font-size: 32rpx;
			}
			
			.scanner-close {
				color: #fff;
				font-size: 48rpx;
				padding: 0 20rpx;
			}
		}
		
		.scanner-content {
			flex: 1;
			position: relative;
			overflow: hidden;
			
			.barcode {
				width: 100%;
				height: 100%;
			}
		}
		
		.scanner-tip {
			padding: 20rpx;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			background: rgba(0,0,0,0.8);
		}
	}

	.photo-section {
		margin-top: 10rpx;
		
		.photo-preview {
			position: relative;
			margin-bottom: 20rpx;
			overflow: hidden;
			
			.preview-image {
				width: 100%;
				/* height: 400rpx;  移除固定高度 */
				border-radius: 8rpx;
			}
			
			.photo-actions {
				position: absolute;
				top: 10rpx; /* 定位到右上角 */
				right: 10rpx; /* 定位到右上角 */
				display: flex;
				gap: 20rpx;
				z-index: 10;

				.delete-btn {
					width: 50rpx; /* 调整大小 */
					height: 50rpx; /* 调整大小 */
					line-height: 50rpx; /* 垂直居中 */
					padding: 0; /* 移除内边距 */
					background: rgba(0,0,0,0.6); /* 半透明黑色背景 */
				color: #fff;
					border-radius: 50%; /* 圆形 */
				font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2); /* 添加阴影 */
				}
			}
		}
		
		.take-photo-btn {
			width: 200rpx;
			height: 200rpx;
			line-height: 200rpx;
			text-align: center;
			background-color: #f5f5f5;
			border: 2rpx dashed #ddd;
			border-radius: 8rpx;
			color: #666;
			font-size: 28rpx;
		}
	}

	.feedback-form {
		margin-top: 30rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);

		.form-section {
			.form-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
				color: #333;
			}

			.photo-section {
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #eee;

				.photo-preview {
					position: relative;
					margin-bottom: 20rpx;
					overflow: hidden;

					.preview-image {
						width: 100%;
						/* height: 400rpx;  移除固定高度 */
						border-radius: 8rpx;
					}

					.photo-actions {
						position: absolute;
						top: 10rpx; /* 定位到右上角 */
						right: 10rpx; /* 定位到右上角 */
						display: flex;
						gap: 20rpx;
						z-index: 10;

						.delete-btn {
							width: 50rpx; /* 调整大小 */
							height: 50rpx; /* 调整大小 */
							line-height: 50rpx; /* 垂直居中 */
							padding: 0; /* 移除内边距 */
							background: rgba(0,0,0,0.6); /* 半透明黑色背景 */
							color: #fff;
							border-radius: 50%; /* 圆形 */
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2); /* 添加阴影 */
						}
					}
				}

				.photo-upload {
					.upload-btn {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
			width: 100%;
			height: 200rpx;
						background: #f5f7fa;
						border: 2rpx dashed #dcdfe6;
			border-radius: 8rpx;
						color: #909399;
						transition: all 0.3s ease;

						.upload-icon {
							font-size: 48rpx;
							margin-bottom: 10rpx;
						}
						
						&.upload-btn-disabled {
							background: #f0f0f0;
							border-color: #d0d0d0;
							color: #999;
							cursor: not-allowed;
							opacity: 0.7;
						}
					}
				}
			}

			.problem-section {
				.problem-textarea {
					width: 100%;
					height: 280rpx; /* 增加高度 */
					min-height: 150rpx; /* 设置最小高度，防止内容过少时塌陷 */
					padding: 24rpx; /* 增加内边距 */
					background: #f5f7fa;
					border: 1rpx solid #dcdfe6;
					border-radius: 8rpx;
			margin-bottom: 20rpx;
					font-size: 28rpx;
					line-height: 1.6; /* 增加行高，提升可读性 */
					box-sizing: border-box; /* 确保padding不会撑大元素 */
					transition: all 0.2s ease-in-out; /* 添加过渡效果 */

					&:focus {
						border-color: #409eff; /* 聚焦时边框变色 */
						box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.2); /* 聚焦时添加光晕效果 */
						outline: none;
					}
				}
		}
		
		.submit-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
				background: #409eff;
			color: #fff;
				border-radius: 40rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
				margin-top: 20rpx;
			
				&.submit-btn-disabled {
					background: #a0cfff;
					cursor: not-allowed;
			}
			
			.loading-spinner {
				width: 32rpx;
				height: 32rpx;
					border: 4rpx solid #fff;
				border-top-color: transparent;
				border-radius: 50%;
					animation: spin 1s linear infinite;
			}
			}
		}
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.feedback-records {
		margin-top: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;

		.records-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		.records-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;
		}

		.record-item {
			background: #f5f7fa;
			border-radius: 12rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

			.record-image {
				width: 100%;
				height: 200rpx;
				object-fit: cover;
			}

			.record-info {
				padding: 16rpx;

				.record-user {
					font-size: 24rpx;
					color: #333;
					font-weight: bold;
					display: block;
					margin-bottom: 8rpx;
				}

				.record-time {
					font-size: 22rpx;
					color: #666;
					display: block;
					margin-bottom: 8rpx;
				}

				.record-description {
					font-size: 24rpx;
					color: #666;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.value-edit {
		display: flex;
		align-items: center;
		gap: 10rpx;
		
		.edit-input {
			flex: 1;
			height: 60rpx;
			border: 1rpx solid #dcdfe6;
			border-radius: 4rpx;
			padding: 0 10rpx;
			font-size: 28rpx;
			background-color: #fff;
			
			&:focus {
				border-color: #409eff;
				outline: none;
			}
		}
		
		.edit-picker {
			flex: 1;
			height: 40px;
			line-height: 40px;
			padding: 0 10px;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			background-color: #fff;
		}
	}
			
			.picker-value {
		color: #606266;
	}

	.wine-list {
		margin: 20rpx 0;
		
		.wine-item {
			background: #f5f7fa;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			
			.wine-info {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				
				.wine-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}
				
				.wine-quantity {
					font-size: 28rpx;
					color: #666;
				}
				
				.wine-date {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.add-wine-form {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		
		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.label {
				width: 120rpx;
				font-size: 28rpx;
				color: #666;
			}
			
			.wine-picker,
			.date-picker {
				flex: 1;
				height: 80rpx;
				border: 1rpx solid #dcdfe6;
				border-radius: 8rpx;
				padding: 0 20rpx;
				background: #fff;
				
				.picker-value {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
			
			.quantity-input {
				flex: 1;
				height: 80rpx;
				border: 1rpx solid #dcdfe6;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				background: #fff;
			}
		}
		
		.add-wine-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #409EFF;
			color: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
			margin-top: 20rpx;
			
			&:disabled {
				background: #a0cfff;
			}
		}
	}

	.feedback-section {
		margin: 20rpx 0;
	}
	.feedback-title {
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx 0 10rpx 0;
	}
	.feedback-list {
		margin-bottom: 30rpx;
	}
	.feedback-row {
		display: flex;
		flex-direction: row;
		margin-bottom: 10rpx;
	}
	.feedback-item {
		flex: 1;
		margin: 0 5rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.feedback-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-bottom: 6rpx;
	}
	.feedback-desc {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		word-break: break-all;
	}
	.feedback-meta {
		font-size: 22rpx;
		color: #999;
		margin-bottom: 2rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* 确保editable-booker-controls内部元素垂直堆叠 */
.editable-booker-controls {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin: 10rpx 0 0 0;
}

/* 为搜索框和选择器添加一些间距 */
.booker-search-wrapper {
  margin-bottom: 10rpx; /* 调整为你需要的间距 */
  display: flex;
  gap: 10rpx; /* 两个搜索框之间的间距 */
}

/* 确保picker内的value显示完整 */
.booker-picker-wrapper .value {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  border: 1rpx solid #dcdfe6;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #f8f8f8;
  color: #333;
  box-sizing: border-box;
}

/* 你可能需要调整其他样式以适应整体布局 */
/* 例如，如果.detail-col是flex容器，可以调整其子元素的宽度或flex属性 */
.detail-col .value {
  flex-grow: 1; /* 确保静态值区域能扩展 */
  word-break: break-all;
}

/* 调整输入框样式 */
.booker-search-wrapper input {
  width: 50%; /* 每个搜索框占50%宽度 */
  height: 60rpx;
  border: 1rpx solid #dcdfe6;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 0;
  transition: border-color 0.2s;
}

.booker-search-wrapper input:focus {
  border-color: #409eff;
  outline: none;
}

/* 确保detail-col在编辑模式下垂直堆叠其内容 */
.detail-col.booker-edit-mode {
  flex-direction: column; /* 强制垂直排列 */
  align-items: flex-start; /* 标签和编辑控件左对齐 */
}

.popup-content {
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;
	
	.popup-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.action-list {
		.action-item {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1rpx solid #eee;
			
			&:active {
				background-color: #f5f7fa;
	}
			
			.action-text {
				font-size: 32rpx;
				color: #333;
			}
		}
	}
	
	.cancel-btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		
		&:active {
			background-color: #e9ecef;
		}
		
		font-size: 32rpx;
		color: #666;
	}
}

.edit-textarea {
	width: 100%;
	height: 160rpx;
	padding: 20rpx;
	background-color: #f8f9fa;
	border: 1px solid #dcdfe6;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
	
	&:focus {
		border-color: #409eff;
		background-color: #fff;
	}
}

.value {
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
	padding: 20rpx;
	background-color: #f8f9fa;
	border-radius: 8rpx;
	min-height: 160rpx;
	white-space: pre-wrap;
	word-break: break-all;
}

.announcement-item {
	background-color: #f8f9fa;
	border-radius: 12rpx;
	padding: 24rpx;
	margin: 20rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center; // 整体居中
	
	.announcement-header {
		width: 100%;
		margin-bottom: 20rpx;
		text-align: center; // 标题居中
		
		.announcement-label {
			display: inline-block; // 改为inline-block以便居中
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.announcement-body {
		width: 100%;
		
		.announcement-content {
			width: 100%;
			display: flex;
			justify-content: center; // 内容居中
			
			.edit-textarea {
				width: 90%; // 稍微窄一点，看起来更美观
				height: 200rpx;
				padding: 20rpx;
				background-color: #fff;
				border: 1px solid #dcdfe6;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #333;
				line-height: 1.5;
				box-sizing: border-box;
				text-align: center; // 文本居中
				
				&:focus {
					border-color: #409eff;
					background-color: #fff;
				}
			}
			
			.announcement-text {
				display: block;
				width: 90%; // 与编辑框保持一致
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 8rpx;
				min-height: 200rpx;
				white-space: pre-wrap;
				word-break: break-all;
				box-sizing: border-box;
				text-align: center; // 文本居中
			}
		}
	}
}

.booker-value {
  font-size: 28rpx;
  color: #333;
  font-weight: normal;
  margin-left: 20rpx;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  font-weight: normal;
}

/* 反馈记录样式 */
.feedback-records {
	margin-top: 30rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	.records-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #409eff;
		padding-bottom: 10rpx;
	}

	.records-grid {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.record-item {
		display: flex;
		align-items: flex-start;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		border-left: 4rpx solid #409eff;
		gap: 20rpx;

		&.text-only {
			// 纯文字反馈的样式
			padding: 24rpx;
			background-color: #fff;
			border: 1rpx solid #e9ecef;
			border-left: 4rpx solid #409eff;
		}

		.record-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			flex-shrink: 0;
		}

		.record-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 8rpx;
			cursor: pointer;
			transition: all 0.2s ease;

			&:active {
				opacity: 0.7;
			}

			&.full-width {
				// 纯文字反馈时，信息区域占满宽度
				width: 100%;
			}

			.record-user {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.record-time {
				font-size: 24rpx;
				color: #666;
			}

			.record-description {
				font-size: 26rpx;
				color: #555;
				line-height: 1.5;
				background-color: #fff;
				padding: 12rpx;
				border-radius: 6rpx;
				border: 1rpx solid #e9ecef;

				.text-only & {
					// 纯文字反馈时，描述区域样式调整
					background-color: #f8f9fa;
					padding: 16rpx;
					border: none;
					border-radius: 8rpx;
					margin-top: 8rpx;
				}
			}
		}
	}

	.no-records {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
	}
}

/* 文字弹窗样式 */
.text-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.text-modal-content {
	background-color: #fff;
	border-radius: 16rpx;
	width: 100%;
	max-width: 600rpx;
	max-height: 80vh;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);

	.text-modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;

		.text-modal-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.text-modal-close {
			font-size: 40rpx;
			color: #999;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: #f5f5f5;

			&:active {
				background-color: #e0e0e0;
			}
		}
	}

	.text-modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;

		.text-modal-user {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.text-modal-time {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.text-modal-description {
			font-size: 28rpx;
			color: #333;
			line-height: 1.6;
			background-color: #f8f9fa;
			padding: 20rpx;
			border-radius: 8rpx;
			white-space: pre-wrap;
			word-break: break-all;
		}
	}
}
</style>
